<template>
 <div class="line_list pd_40">
   <div>
     <el-row :gutter="40">
      <el-col :span="7">
        <div class="fsc">
          <span class="articlelist_lable">文章名称</span>
          <el-input
            placeholder="请输入"
            v-model.trim="tableData.title">
          </el-input>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="fsc">
          <span class="articlelist_lable">线路名称</span>
            <el-input
            placeholder="请输入"
            v-model.trim="tableData.name">
          </el-input>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="fsc">
          <span class="articlelist_lable">线路状态</span>
             <el-select v-model="tableData.linestatus">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </div>
      </el-col>

      <el-col class='mg_t20' :span="7">
        <div class="fsc">
          <span class="articlelist_lable">站点数</span>
          <el-input
            placeholder="请输入"
            v-model.trim="tableData.sitenum">
          </el-input>
        </div>
      </el-col>
      <el-col class='mg_t20' :span="8">
        <div class="fsc">
          <span class="articlelist_lable">上架时间</span>
          <el-date-picker
              class="articlelist_lable_time"
              v-model="tableData.start"
              v-on:change = 'upDateTime'
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
          <span>-</span>
          <el-date-picker
            class="articlelist_lable_time"
            v-on:change = 'upDateTime'
            v-model="tableData.end"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-col>
      <el-col class='mg_t20' :span="7">
        <div class="fsc">
          <span class="articlelist_lable">起始站点</span>
          <el-input
            placeholder="请输入"
            v-model.trim="tableData.startsite">
          </el-input>
        </div>
      </el-col>
     </el-row>
     <p class="articlelist_query fec">
      <el-button @click="reset()">重置</el-button>
      <el-button @click="getLine('query')" type="primary">查询</el-button>
    </p>
   </div>
   <div>
     <el-table
      :data="tableList"
      stripe
      style="width: 100%">
      <el-table-column
        prop="title"
        label="文章名称"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="createtime"
        align="center"
        label="上架时间"
        width="220">
        <template slot-scope="scope">
          <span>{{getdates(scope.row.createtime)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        width="180"
        align="center"
        label="线路名称">
      </el-table-column>
      <el-table-column
        prop="startsite"
        align="center"
        width="200"
        label="起始站点">
      </el-table-column>
      <el-table-column
        prop="sitenum"
        width="150"
        label="站点数">
      </el-table-column>
      <el-table-column
        prop="mileage"
        align="center"
        width="150"
        label="线路里程">
      </el-table-column>
      </el-table-column>
      <el-table-column
        width="180"
        align="center"
        label="线路状态">
        <template slot-scope="scope">
           <span>{{isStatus(scope)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="180"
        label="操作">
        <template slot-scope="scope">
        <el-button @click="preview(scope)" type="primary" size="small">预览</el-button>
        <el-button @click="administration(scope)" type="success" size="small">管理</el-button>
      </template>
      </el-table-column>
    </el-table>
   </div>
  <div class="block fec mg_t30">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="current"
      :page-sizes="[10]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>

  <!--点击管理alert-->
  <el-dialog
    title="文章管理"
    :visible.sync="centerDialogVisible"
    width="500px"
    center>
    <el-row :gutter="20">
      <el-col class="mg_t40" :span="24">
        <div class="fbc fwrap mg_b30">
          <el-button @click="index=1" :type="index==1?'primary':''" :disabled="this.dialog.linestatus==3?true:false">规划线路</el-button>
          <el-button @click="index=2" :type="index==2?'primary':''" :disabled="this.dialog.linestatus==2?false:true">下架处理</el-button>
          <el-button @click="index=3" :type="index==3?'primary':''" :disabled="this.dialog.linestatus==3?false:true">恢复上架</el-button>
        </div>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="centerDialogVisible = false">取消</el-button>
      <el-button @click="sure()" type="primary">确定</el-button>
    </span>
  </el-dialog>
 </div>
 
</template>
<script>
export default {
  data() {
    return {
      username: localStorage.getItem('username'),
      tableList: [],  //线路列表
      tableData: { //线路参数
        title: '',
        start: '',
        end: '',
        linestatus: '',
        name: '',   //线路名称
        sitenum: '',  //站点数
        startsite: '',
        page: 1,
      }, 
      dialog: {
        aid: '',   //   文章的id
        linestatus: '',  //线路的状态
      },
      total: null,  //列表总数据
      index: 1,     //dialog点亮button
      current: 1,   // 默认分页
      centerDialogVisible: false,

      options: [{   //线路状态
          value: '',
          label: '全部'
        },{
          value: 1,
          label: '待规划'
        }, {
          value: 2,
          label: '已规划'
        }, {
          value: 3,
          label: '已下架'
        },],
      getdates: this.$utils.getdates,
    }
  },
  created() {
    this.getLine();
    // console.log(localStorage.getItem('username'));
  },
 
  
  methods: {
    sure() {        //dialog确定
      let url = '/admin/lines/putaway';
       
      console.log(this.dialog.aid)
      if(this.index == 1) {
        this.$router.push({
          path: '/line/add',
          query: {
            aid: this.dialog.aid,
          }
        })
      }else if(this.index == 2) {
        let data = {
          aid: this.dialog.aid,
          isput: 1
        };
        this.$request.post(url, data).then(res=> {
          console.log(res)
          if(res.data.code == '0000') {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.centerDialogVisible = false;
            this.getLine();
          }else {
            this.$message.error('操作失败')
          }
        }).catch(err=> {
          console.log(err);
          this.$message.error('操作错误')
        })
      }else if(this.index == 3) {
        let data = {
          aid: this.dialog.aid,
          isput: 2
        };
        this.$request.post(url,data).then(res=> {
          if(res.data.code == '0000') {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.centerDialogVisible = false;
            this.getLine();
          }else {
            this.$message.error('操作失败')
          }
        }).catch(err=> {
          console.log(err);
          this.$message.error('操作错误')
        })
      }
      
    },
    preview(scope) {   //预览
      console.log(scope);
      let url = '/admin/article/lineDetails';
      let data = { pid:'1', linesId:[1,2] };
      this.$request.get(url,data).then(res=> {
        console.log(res)
      }).catch(err=> {
        console.log(err)
      })
    },
    isStatus(scope) {    //判断线路状态
      let status = scope.row.linestatus;
      if(status==1) {
        return '待规划'
      }else if(status==2) {
        return '已规划'
      }else if(status==3) {
        return '已下架'
      }
    },
    getLine(label) {       //获取线路列表
      
      if(label == 'query') {
        this.tableData.page = 1;
        this.current = 1;
      }
      let url = '/admin/lines/query';
      let data = this.tableData;
      this.$request.post(url,data).then(res=> {
        this.tableList = res.data.data.list;
        this.total = res.data.data.page.total;
        console.log(res)
      }).catch(err=> {
        console.log(err)
      })
    },
    reset(label) {  //重置
      this.tableData.title = '';
      this.tableData.name = '';
      this.tableData.linestatus = '';
      this.tableData.sitenum = '';
      this.tableData.start = '';
      this.tableData.end = '';
      this.tableData.startsite = '';
      this.getLine('query');
    },
    upDateTime() {         //判断时间选择
      if(this.tableData.end) {
        if(this.tableData.start - this.tableData.end > 0) {
          this.$message.error('时间选择错误')
        } 
      }
    },
    handleSizeChange(val) {
      
    },
    handleCurrentChange(val) {
      this.tableData.page = val;
      this.getLine()
    },
    administration(scope) {     //点击管理
      // console.log(scope.row.id);
      this.dialog.linestatus = scope.row.linestatus;
      this.dialog.aid = scope.row.id;
      // sessionStorage.setItem('lineLabel', JSON.stringify(this.lineLabel))
      this.centerDialogVisible = true;
      console.log(scope.row.linestatus);
      if(scope.row.linestatus == 1||scope.row.linestatus == 2) {
        this.index = 1;
      }else if(scope.row.linestatus == 3) {
        this.index = 3
      }
        
    },
    determine() {   //dialog确定
      if(this.index===1) {
         this.$router.push({
           path: '/line/add',
           modify: true
         });
         this.centerDialogVisible = false;
      }
    }
  }
}
</script>
<style scoped lang="less">
  .articlelist_lable {
    min-width: 20%;
    white-space: nowrap;
  }
  .articlelist_query {
    margin-right: 100px;
    height: 100px;
  }
</style>

